<template>
  <view>

    <!-- 使用自定义的搜索组件 -->
    <my-search :placeholder="queryObj.query" @confirm="search"></my-search>

    <view class="search-list">
      <view>
        <view v-for="(item, i) in searchList" :key="i" class="search-item" @click="gotoDetail(searchList, item, i)">
          <view class="search-item-1">
            <uni-icons type="star" size="20"></uni-icons>
          </view>
          <view class="search-item-2">
            <view>{{item.title}}</view>
          </view>
          <view class="search-item-3">
            <uni-icons type="forward" size="20"></uni-icons>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 请求参数对象
        queryObj: {
          // 查询关键词
          query: '',
          // 页码值
          pagenum: 1,
          // 每页显示多少条数据
          pagesize: 10
        },
        // 搜索列表的数据
        searchList: [],
        // 总数量，用来实现分页
        total: 0
      };
    },
    onLoad(options) {
      // 将页面参数转存到 this.queryObj 对象中
      this.queryObj.query = options.query || ''
      console.log(options.query)
      // 调用获取搜素列表数据的方法
      this.getSearchList()
    },
    methods: {
      // 获取搜素列表数据API
      getSearchList() {
        var that = this;
        uni.request({
          url: this.$config.baseApi + '/com/wx/data/getDataSearch',
          method: 'get',
          data: {
            query: that.$data.queryObj.query
          },
          success: (res) => {
            that.$data.searchList = res.data;
          }
        });
      },
      // 跳转搜索页面
      search(res) {
        // 调用API页面跳转
        uni.navigateTo({
          // 指定详情页面的 URL 地址，并传递 goods_id 参数
          url: '/pages/searchlist/searchlist?query=' + res.value
        })
      },
      // 点击详情页面
      gotoDetail(dataList, item, j) {
        // 当前id
        var id = item.id;
        var idlist = []
        for (var i = 0, len = dataList.length; i < len; i++) {
          var temp = dataList[i];
          idlist.push(temp.id);
        }
        uni.navigateTo({
          url: '/pages/detail/detail?id=' + item.id + '&idlist=' + JSON.stringify(idlist) + '&i=' + j
        })
      }
    }
  }
</script>

<style scoped>
  // 修改uni-search-bar样式
  /deep/ .uni-searchbar {
    padding-left: 0;
    padding-right: 0;
  }
</style>

<style lang="scss">
  .search-list {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .search-item {
    width: 686rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 2rpx solid #A6A6A6;
  }

  .search-item-1 {}

  .search-item-2 {
    padding: 30rpx;
  }

  .search-item-2 view {
    width: 540rpx;
    word-break: break-all;
    font-size: 26rpx;
    line-height: 40rpx;
    letter-spacing: 8rpx;
  }

  .search-item-3 {}
</style>